<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-12"> <div class="services-list-area"> <div class="service-list"> <h2 id="s_es">Thought Leadership</h2> <div class="service-list-fill"> <h3>Thought Leadership</h3> </div> </div> </div> </div>

.services-list-area { position: relative; display: inline-block; } .services-list-area:hover { cursor: pointer; } .service-list { position: relative; margin-bottom: 40px; } h2 { text-transform: uppercase; font-size: 50px; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #e3d6ce; color: rgba(255, 255, 255, 0); line-height: 0.8; letter-spacing: 3px; font-family: 'Clash Display', sans-serif; margin: 0px; font-weight: 600; margin-bottom: 5px; } .service-list .service-list-fill { position: absolute; top: auto; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; transition: all 600ms; } .service-list .service-list-fill h3 { letter-spacing: 3px; color: #E3D6CE; line-height: 0.8; font-size: 50px; position: absolute; left: 0; top: auto; right: 0; bottom: 0; z-index: 1; display: inline-block; margin: 0; text-transform: uppercase; line-height: 0.8; letter-spacing: 3px; font-family: 'Clash Display', sans-serif; margin: 0px; font-weight: 600; margin-bottom: 0px; } .services-list-area:hover .service-list-fill { height: 0%; }